<template>
<div class="page-content">
<!-- 只能用输入框的形式分类查询数据 -->
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="70rem">
          <el-row>
            <el-col :span="6"><el-select :default-active="$route.path" @change="chickvalue"
             v-model="searchValue" filterable placeholder="根据分类选择" class="h-m-select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              v-model="item.value">
            </el-option>
          </el-select>
          </el-col>
           <el-col :span="4" :pull="1">
             <el-input
              placeholder="输入批次号查询"
              v-model="batchValue"
              size="small"
              @change="getDataByBatch"
            >
            </el-input>
           </el-col>
           <el-button type="primary" style="margin-left:-2rem ">搜索</el-button>
          </el-row>
          </el-form>
      </div>
    </table-bar>

    <!-- 表格区域开始 -->
    <TheTable
      :columns="columns"
      :layout="false"
      ref="tableRef"
      :data="allList"
      :page.sync="page"
      :showPage="false"
    >
    <el-table-column
        label="屠宰批次"
        prop="shBatch"
        v-if="columns[0].show"
      />
     <el-table-column
        label="商品名称"
        prop="comName"
        v-if="columns[1].show"
      />
       <el-table-column
        label="规格"
        prop="type"
        v-if="columns[2].show"
      />
      <el-table-column
        label="库存数量"
        prop="amount"
        v-if="columns[3].show"
      />
       <el-table-column
        label="单位"
        prop="utils"
        v-if="columns[4].show"
      />
      <el-table-column
        label="备注"
        prop="utils"
        v-if="columns[5].show"
      />


    </TheTable>
    <!-- 表格区域结束 -->
        <!-- 页码条区域开始 -->
    <div class="page-css">
      <el-pagination
        :page-sizes="[2, 5, 10, 15]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="true"
      >
      </el-pagination>
    </div>
    <!-- 页码条区域结束 -->
</div>
</template>

<script>
import {
  getAllInfoByPage,
  getInfoByBatch,
  fuzzySearchReq
} from "@/api/Slaughter/StorageManage.js";
export default {
    name: "StorageManage",
    meta: {
        title: "库存管理",
    },

  data() {
    return {
      // 按分类查询
      searchValue:"",
      options: [],
      value: '',
       //根据批次号获取数据
      batchValue: "",
      // 主体表格数据
      allList: [],
      diffRequest:{
        pigeonType:"6两鸽",
      },
      page: {
        current: 1,
        pageSize: 10,
        pageNum: 1,
        total: 4,
      },
      columns: [
      { name: "批次号", show: true, prop: "shBatch" },
      { name: "名称", show: true, prop: "comName"},
      { name: "类型", show: true, prop: "type" },
      { name: "库存", show: true, prop: "amount" },
      { name: "单位", show: true, prop: "utils" },
      { name: "创建时间", show: true, prop:"gmtCreate"},
      { name: "修改时间", show: true, prop: "gmtModified" },
    ],
    };
  },
    created() {
      this.setAllList();
      // 模糊查询的请求的数据
      this.fuzzyQuery()
   },
    methods: {
    handleClick () {
      alert('button click')
    },

    // 根据库存类型查询
    chickvalue () {
      // console.log(this.searchValue)
      this.diffRequest.pigeonType = this.searchValue;
      this.setAllList();
    },
      changeColumn(columns) {
        this.columns = columns
        this.$refs.table.doLayout()
      },
      // 根据分类获取数据(默认)
      async setAllList() {
        // 清空按批次搜索框内容
        this.batchValue=""
      const { data: res } = await getAllInfoByPage(
        this.page.pageNum,
        this.page.pageSize,
        this.diffRequest.pigeonType,
      );
      // console.log("请求到的列表kkk", res);
      if (res.statusCode !== 20000) {
        this.$message.error("暂无该批次号数据");
      } else {
        this.allList = res.data.records;
        this.page.total = res.data.total;
        // this.$message.success("查询成功")
      }
    },
      async  fuzzyQuery () {
      const { data: res } = await fuzzySearchReq();
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else{
      for(var i=0;i<res.data.length;i++){
        this.options.push({value:''});
        this.options[i].value=res.data[i];
      }
      }
    },

    //根据批次号查询数据
    async getDataByBatch(shBatch) {
      // 清空按分类搜索，即按批次、按分类是分别搜索
      this.searchValue=''
      // console.log("批次号", shBatch);
      if (!shBatch) {
        this.setAllList();
      } else {
        const { data: res } = await getInfoByBatch(
          this.page.pageNum,
          this.page.pageSize,
          shBatch
        );
        // console.log("请求到的列表", res);
        if (res.statusCode !== 20000) {
          this.$message.error("暂无该批次号数据");
        } else {
          this.allList = res.data.records;
          this.page.total = res.data.total;
          // this.$message.success("查询成功")
        }
      }
    },

    handleCurrentChange(newSize){
      this.page.pageNum = newSize;
      // 重新获取数据
      this.setAllList()

    },
    handleSizeChange(newPage){
      this.page.pageSize = newPage
      this.setAllList()
    },
    },
}
</script>

<style lang="scss" scoped>
.page-css{
   margin-top: 1rem;
  text-align: center;
}
</style>
